<template>
  <div class="content">
    <div class="elform">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="width:500px"
      >
        <el-form-item label="帐号" prop="username">
          <el-input disabled v-model.number="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { userUpdate } from '@/api/requests/base'
import { log } from 'util'
export default {
  data () {
    var checkusername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('帐号不能为空'));
      }
      setTimeout(() => {
        callback();
      }, 1000);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        username: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        username: [
          { validator: checkusername, trigger: 'blur' }
        ]
      }
    };
  },
  created () {
    this.ruleForm.username = JSON.parse(localStorage.getItem('userDataCache')).username
  },
  methods: {

    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userUpdate(this.ruleForm.username, this.ruleForm.pass, this.ruleForm.checkPass).then(res => {
            if (res.status) {
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
            } else {
              this.$notify({
                title: '失败',
                message: '操作失败',
                type: 'fail'
              });
            }


          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
.content {
  padding: 40px;
}
.elform {
}
</style>
